<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<div id="app">
			<div id="demo1">
				<p v-for="value in hobby" v-text="value"></p>
			</div>
		<hr />
		
			<div id="demo2">
				<p v-for="value,index in hobby">
					<span v-text="index+1"></span>
					---
					<span v-text="value"></span>
				</p>
			</div>
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
											<td>编号</td>
											<td>名称</td>
											<td>年龄</td>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
		</div>
		<hr />
		<!-- 基本语法 -->
		<script src="../js/vue.js"></script>>
		<script>
		 var app=new Vue({
			el: "#app",
			data: {
				hobby:["敲代码","改BUG","钻研技术"],
				userList:[{id:100,name:"泰森",age:60},
				         {id:101,name:"嘴炮",age:40},
						 {id:102,name:"泰坦",age:30000},
						 ],
			},
			methods:{
				
				// addNum:function(){
				// 	this.num++
				// }
			}
		})
		</script>
	</body>
</html>
